<template>
  <div class="two">
    <div class="comingTop">
      <div class="comingTopTitle">近期最受期待</div>
      <div class="comingTopImgBox">
        <div class="comingTopImg">
          <div
            class="comingTopImgDiv"
            v-for="item in bestComing"
            :key="item.id"
          >
            <img :src="item.img" />
            <div class="wish">
              <span></span>
            </div>
            <div class="wishText">
              <span>{{ item.wish }}</span
              >人想看
            </div>
            <div class="coimgName">
              {{ item.nm }}
            </div>
            <div class="coimgdate">
              {{ item.comingTitle | datesq }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="comingbody">
      <div class="comingbodyBox" v-for="(item, key) in comingData" :key="key">
        <div class="comingtitleDate">
          {{ key }}
        </div>
        <div id="movieD">
            <div class="movieDS" v-for="myitem in item" :key="myitem.id">
              <div class="movieDSL">
                <img :src="myitem.img" />
              </div>
              <div class="movieDSM">
                <span class="movieNamespan">
                  <span class="movieName">{{ myitem.nm }}</span> 
                  <span v-if="myitem.version == 'v2d imax'"> v2d imax</span>
									<span v-if="myitem.version == 'v3d'">3d</span>
									<span v-if="myitem.showst == 4">点映</span>
                </span>
                <span>{{ myitem.wish }}想看</span>
                <span class="star">主演{{ myitem.star }}</span>
                <span>{{ myitem.showInfo }}</span>
              </div>
              <div :class="{ movieDSR: 'true', bluepre: myitem.preShow }">
                <span>
                  <span v-if="myitem.preShow === false">想看</span>
                  <span v-else>预售</span>
                </span>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "coming",
  data() {
    return {
      bestComing: [],
      comingData: [],
    };
  },
  mounted() {
    axios({
      method: "get",
      url: "/ajax/mostExpected?ci=70&limit=10&offset=0&token=&optimus_uuid=204ED260C84411EB8D07E93F9B3EFA4AC96D3D914ADF4191B62C597788A34648&optimus_risk_level=71&optimus_code=10",
    }).then((res) => {
      this.bestComing = res["data"]["coming"];
      this.bestComing.forEach((item) => {
        item.img = item.img.replace("w.h", "170.230");
      });
    });
    axios({
      method: "get",
      url: "/ajax/comingList?ci=70&token=&limit=10&optimus_uuid=204ED260C84411EB8D07E93F9B3EFA4AC96D3D914ADF4191B62C597788A34648&optimus_risk_level=71&optimus_code=10",
    }).then((res) => {
      let arr = res["data"]["coming"];
      let resobj = {};
      arr.forEach((item) => {
        item.img = item.img.replace("w.h", "64.90");
        if (resobj[item.comingTitle]) {
          resobj[item.comingTitle].push(item);
        } else {
          resobj[item.comingTitle] = [];
          resobj[item.comingTitle].push(item);
        }
      });
      this.comingData = resobj;
      console.log(this.comingData);
    });
  },
  filters: {
    datesq: function (value) {
      return value.split(" ")[0];
    },
  },
};
</script>

<style scoped>
.comingTop {
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 5.12rem;
  padding: 0.32rem 0 0.32rem 0.506667rem;
}

.comingTopTitle {
  color: #777;
  font-size: 14px;
}

.comingTopImgBox {
  width: 100%;
  overflow-x: scroll;
}

.comingTopImg {
  display: flex;
  justify-content: space-between;
  width: 26.666667rem;
}

.comingTopImgDiv {
  position: relative;
  width: 2.266667rem;
  height: 4.186667rem;
}

.comingTopImgDiv img {
  width: 2.266667rem;
  height: 3.066667rem;
}

.wish {
  width: 0.746667rem;
  height: 0.746667rem;
  background: rgba(61, 63, 71, 0.6);
  border-bottom-right-radius: 10px;
  line-height: 28px;
  text-align: center;
  vertical-align: middle;
  position: absolute;
  top: 0px;
  left: 0px;
}

.wish span {
  display: inline-block;
  width: 0.266667rem;
  height: 0.266667rem;
  background: url();
  background-size: 100% 100%;
}

.wishText {
  text-align: center;
  font: 12px;
  color: #faaf00;
  font-weight: 600;
  position: absolute;
  top: 2.586667rem;
  left: 0px;
  background-image: linear-gradient(-180deg, rgba(77, 77, 77, 0), #000);
  width: 100%;
  height: 0.533333rem;
}

.coimgName {
  font-size: 13px;
  color: #222;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-top: 0.133333rem;
}

.coimgdate {
  margin-top: 0.133333rem;
  font-size: 12px;
  color: #999;
}

.comingbody {
  margin-top: 0.266667rem;
  width: 100%;
  background: white;
}

.comingtitleDate{
	font-size: 14px;
	color: #333;
}

#movieD {
  background-color: white;
  height: 100%;
}

.movieDS {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 10px;
}

.movieDSL {
  width: 64px;
  height: 90px;
  flex: 0 1 15%;
}

.movieDSL img {
  width: 64px;
  height: 90px;
}

.movieDSM {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  flex: 0 1 60%;
}

.movieDSM>span {
  width: 220px;
}

.movieDSR {
  width: 47px;
  height: 27px;
  background-color: #faaf00;
  border-radius: 4px;
  display: flex;
  flex: 0 1 15%;
  justify-content: center;
  align-items: center;
}

.movieDSR span {
  display: inline-block;
  font-size: 14px;
  color: white;
  text-align: center;
}

.star {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bluepre {
  background-color: #3c9fe6;
}

.movieNamespan{
	display: flex;
	justify-content: start;
}

.movieNamespan:not(:first-child){
		display: inline-block;
    width: 40px;
    padding-right: 10px;
}

.movieName{
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.comingtitleDate{
	padding: .266667rem 0 .266667rem .266667rem;
}
</style>